<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MZUI</title>

    <!-- MZUI CSS file -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/mzui/mzui.min.css') }}">
</head>
<body>
<div class="heading dark" style="padding: 10px 10px 10px 10px">
    <div class="avatar"><img src="{{ url_for('static', filename='images/icon.png') }}"/></div>
    <div class="title"><strong>韦永坚博客</strong></div>
    <nav class="nav">
        <a><i class="icon-search"></i></a>
        <a><i class="icon-bars"></i></a>
    </nav>
</div>


<div class="list section" style="margin-top: 10px;">
    <a class="item multi-lines with-avatar">
        <div class="avatar circle dark"><img src="{{ url_for('static', filename='images/icon.png') }}"/></div>
        <div class="content">
            <span class="title">整理文档</span>
            <div>
                <small class="text-yellow">#日常任务</small>&nbsp;
                <small class="muted">7月4日 9:00</small>
                <div class="pull-right label dark">已关闭</div>
            </div>
        </div>
    </a>
</div>

<div class="section">
    <div class="heading">
        <div class="title"><strong>今天</strong>
            <small class="muted">7月6日</small>
        </div>
        <nav class="nav">
            <a><i class="icon icon-sort-by-attributes-alt"></i></a>
        </nav>
    </div>
    <div class="box article">
        <p>在 <code>.row</code> 中添加所需数目的 <code>.cell</code>
            即可，所有单元格都会自动拥有合适的宽度。当一行没有足够的空间显示所有单元格时，多余的单元格会自动换行显示。以下相同颜色的单元格在同一行中。</p>
        <div class="row imgs gutter-sm">
            <div class="cell-4"><a data-display="modal" data-target-dismiss="true" data-placement="center"
                                   data-content="<img src='http://zui.sexy/m/doc/img/img1.jpg' alt='' class='no-margin'>"><img
                    src='http://zui.sexy/m/doc/img/img1.jpg' alt=''></a></div>
        </div>
    </div>
</div>


<nav class="nav justified pager" style="position:fixed;bottom:0;">
    <a class="pager-more"><span>已显示 <strong>20</strong> 项，共 <strong>57</strong> 项 &nbsp; <span class="text-link">显示更多 <i
            class="icon icon-double-angle-down"></i></span></span></a>
</nav>


<div class="content white shadow-divider text-center" style="position:fixed;bottom:0;">
    <h2 class="text-red lead">可定制</h2>
    <p class="muted">所有内容可以按需使用，基于 Gulp 构建自定义版本非常简单</p>
</div>
<!-- MZUI JS file -->
<script src="{{ url_for('static', filename='css/js/mzui.min.js') }}"></script>
</body>
</html>